@import "~scss/variables";

$sw-side-navigation-item-link-distance: 10px;

.sw-tabs-item {
    transition: 0.3s all ease-in-out;
    padding: $sw-side-navigation-item-link-distance ($sw-side-navigation-item-link-distance * 1.75);
    border-bottom: 2px solid $color-gray-300;
    text-decoration: none;
    white-space: nowrap;
    color: $color-darkgray-200;
    cursor: pointer;
    user-select: none;

    .sw-tabs-item__error-badge {
        color: $color-crimson-500;
        transform: translateY(-9%);
        margin-left: 4px;
    }

    .sw-tabs-item__warning-badge {
        color: $color-pumpkin-spice-300;
        transform: translateY(-9%);
        margin-left: 4px;
    }

    &.sw-tabs-item--active {
        color: $color-darkgray-800;

        .sw-tabs-item__error-badge {
            color: $color-crimson-400;
        }

        &:focus {
            border-bottom: none;
        }
    }

    &.sw-tabs-item--has-error {
        color: $color-crimson-500;

        &.sw-tabs-item--active {
            color: $color-crimson-500;
        }
    }

    &.sw-tabs-item--is-disabled {
        color: $color-gray-600;
        pointer-events: none;
    }

    &:disabled {
        color: $color-gray-600;
        cursor: not-allowed;
    }

    &:focus {
        box-shadow: inset 0 0 0 2px $color-shopware-brand-500;
        outline: none;
    }
}

.sw-tabs--vertical .sw-tabs-item {
    padding: $sw-side-navigation-item-link-distance;
    border-bottom: 0 solid $color-gray-300;
    border-left: 2px solid $color-gray-300;
}

.sw-tabs--vertical.sw-tabs--align-right .sw-tabs-item {
    border-left: 0;
    border-right: 2px solid $color-gray-300;
}
